<template>
   
    <div class="head" style="margin-bottom: 10px;margin-top: 10px;">
        <el-input type="text" style="height: 30px;width:250px;margin-right: 900px;" 
         placeholder="请输入订单号" v-model="searchOrderId">
        <template #prefix>
          <el-icon class="el-input__icon"><el-icon><Search /></el-icon></el-icon>
        </template>
     </el-input>
     <el-button type="primary" style="position: absolute;right:940px" @click="search">搜索</el-button>

     <!-- 时间搜索 -->
     <el-date-picker
        v-model="date"
        type="date"
        placeholder="选择下单时间"
        style="left: 600px;position: absolute;"
      />
     
      <el-button type="primary" @click="searchByTime" class="searchBytime">搜索</el-button>
     <el-button type="primary" @click="download">下载报表</el-button>
     <!-- <el-button type="primary">新增套餐分类</el-button> -->
    </div>
    
    <el-table :data="tableData" border style="width: 100%;height: 540px;" stripe 
     ref="multipleTableRef"
     @selection-change="handleSelectionChange">
     <el-table-column type="selection" width="55" />
     <el-table-column prop="orderId" label="订单号" width="150" />
     <el-table-column prop="status" label="订单状态" width="90">
      <template #default="scope">
            <el-tag type="danger" v-if="scope.row.status=='待付款'" > {{ scope.row.status }}</el-tag>
            <el-tag type="warning" v-if="scope.row.status=='待派送'" >{{ scope.row.status }}</el-tag>
            <el-tag type="success" v-if="scope.row.status=='已派送'"> {{ scope.row.status }}</el-tag>
            <el-tag v-if="scope.row.status=='已完成'"> {{ scope.row.status }}</el-tag>
        </template>
     </el-table-column>
     <el-table-column prop="name" label="收餐人" width="100"/>
     <el-table-column prop="phone" label="手机号" width="120"/>
     <el-table-column prop="address" label="地址" width="290"/>
     <el-table-column prop="createTime" label="下单时间" width="180"/>
     <el-table-column prop="price" label="实收金额" width="90"/>
     <el-table-column  label="操作" >
         <template #default="scope">
          <el-button type="primary" @click="seeOrder(scope.$index,scope.row)">查看</el-button>

          <el-button type="warning" v-if="scope.row.status=='待派送'" @click="send(scope.$index,scope.row)">派送</el-button>
                   
          <el-button type="danger" v-if="scope.row.status=='待付款'" @click="quexiao(scope.$index,scope.row)">取消</el-button>
            
          <el-button type="success" v-if="scope.row.status=='已派送'" @click="finish(scope.$index,scope.row)">完成</el-button>

         </template>
     </el-table-column>


    </el-table>

 <!-- 分页组件 -->
 <el-pagination background layout="prev, pager, next,sizes" :total="total" 
  :page-sizes="[10, 15, 20, 25]"
  v-model:current-page="currentPage"
  v-model:page-size="pageSize"
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"/>
  
    <!-- 查看订单对话框 -->
    <el-dialog v-model="dialogFormVisible" title="订单详情"  align-center>
     <hr>
     <span>
       <span class="order-txt">订单号:</span>&nbsp;{{ order.orderid }}
       <span style="margin-left: 250px;margin-bottom: 30px;display: inline-block;">
         <span  class="order-txt">订单状态</span>&nbsp;{{ order.status }}
       </span>
     </span><br>
     <span>
       <span  class="order-txt">收货人:</span>&nbsp;{{ order.receive }}
       <span style="margin-left: 340px;margin-bottom: 30px;display: inline-block;">
        <span  class="order-txt">联系电话:</span>&nbsp;{{ order.phone }}
       </span>
     </span><br>
      <span>
        <span  class="order-txt">地址:</span>&nbsp;{{ order.address }}
         <span style="margin-left: 100px;margin-bottom: 30px;display: inline-block;">
        <span  class="order-txt">支付金额:￥</span>&nbsp;{{ order.price }}
        </span>
      </span>
     
        <div><span  class="order-txt">下单时间:</span>&nbsp;{{ order.time }}</div>
    </el-dialog>
 

 
 </template>
 
 <script setup lang="ts">
 
 import { ref,onMounted } from 'vue'
 import { ElTable, useOrderedChildren } from 'element-plus'
 import {ElMessage} from 'element-plus'
 import { formatDateString } from '@/utils/time'
 import  orderApi from '../api/order'
import { isFirefox } from 'element-plus/es/utils'
 
 
 const currentPage = ref(1)
 const pageSize = ref(10)
 const total = ref(0)


 onMounted(()=>{getOrders()})
 //当前页面尺寸变更时
 const handleSizeChange = (val: number) => {
     getOrders()
 }
 //当前页面页数改变时
 const handleCurrentChange = (val: number) => {
     getOrders()
 }
//分页查询
async function getOrders() {
    const data = await orderApi.getOrders(currentPage.value,pageSize.value)
    if(data.code===200){
      tableData.value = data.data.list
    }else{
      ElMessage({"message":data.data,"type":"error"})
    }
}

const tableData:any = ref([])




 interface User {
   name: string
   username: string
   password: string
   phone: string
 }
 //多选功能
 const multipleTableRef = ref<InstanceType<typeof ElTable>>()
 const multipleSelection = ref<User[]>([])
 const toggleSelection = (rows?: User[]) => {
   if (rows) {
     rows.forEach((row) => {
       // TODO: improvement typing when refactor table
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-expect-error
       multipleTableRef.value!.toggleRowSelection(row, undefined)
     })
   } else {
     multipleTableRef.value!.clearSelection()
   }
 }
 const handleSelectionChange = (val: User[]) => {
   multipleSelection.value = val
 }
 
 
 
 
 //订单详情对话框
 const dialogFormVisible = ref(false)

 //订单详情动态每个数据
 const order = ref({
    orderid:'',  //订单号
    status:'',  //状态
    receive:'', //收货人
    address:'', //地址
    phone:'',   //手机号
    price:'',   //金额
    time:''   //下单时间
 })
   
//点击查看订单按钮
const seeOrder=(index:number,row:any)=>{
    dialogFormVisible.value = true;

    order.value.orderid = row.orderId;
    order.value.status = row.status;
    order.value.receive = row.name;
    order.value.address = row.address;
    order.value.phone = row.phone;
    order.value.price = row.price;
    order.value.time = row.createTime
}
    
//下载报表
const download=()=>{
  downloadMsg()
}


 //搜索相关
 //时间范围搜索
 const date = ref('')
//订单号搜索
const searchOrderId = ref()
 
//根据订单id搜索
const search=async ()=>{
   const data = await orderApi.getByOrderId(currentPage.value, pageSize.value, searchOrderId.value)
   if(data.code===200){
     tableData.value = data.data.list
   }else{
     ElMessage({"message":data.data,"type":"warning"})
   }
}
//根据时间搜索
const searchByTime=async ()=>{
    var dateD = new Date(date.value)
    var dateStr = formatDateString(dateD)
    const data = await orderApi.getByDate(currentPage.value,pageSize.value,dateStr)
    if(data.code===200){
     tableData.value = data.data.list
   }else{
     ElMessage({"message":data.data,"type":"warning"})
   }
}

    
//取消订单
const quexiao=(index:number,row:any)=>{
   quexiaoMsg()
}
//派送订单
const send=(index:number,row:any)=>{
    sendMsg()
}
//完成订单
const finish=(index:number,row:any)=>{
  finishMsg()
}
  
    
    
//消息提示  
const quexiaoMsg = () => {ElMessage({ message: '取消接口未开发', type: 'warning', })}
const sendMsg = () => {ElMessage({ message: '派送接口未开发', type: 'warning', })}
const finishMsg = () => {ElMessage({ message: '完成接口未开发', type: 'warning', })}
const downloadMsg = () => {ElMessage({ message: '下载报表接口未开发', type: 'warning', })}
const searchMsg = () => {ElMessage({ message: '下载报表接口未开发', type: 'warning', })}
const searchBytimedMsg = () => {ElMessage({ message: '下载报表接口未开发', type: 'warning', })}
 </script>
 
 
 <style scoped lang="less">
  .head{
     float: right;
  }
 .el-input{
     width: 400px;
     height: 40px;
 }


.order-txt{
  font-weight: 700;
  font-size: 15px;
}

//搜索框
.searchBytime{
  position: absolute;
  left: 830px;
}


 </style>